<template>
	<view class="container">
		<!-- 小球元素 -->
		<view v-if="isMoving" class="ball" :style="{ left: ballX + 'px', top: ballY + 'px' }"></view>
		<!-- <view class="ball" :style="{ left: ballX + 'px', top: ballY + 'px' }"></view> -->
	</view>
</template>

<script>
	export default {
		name: "animationShopping",
		data() {
			return {
				// 小球位置
				ballX: 0,
				ballY: 0,

				// 终点位置
				endX: 300,
				endY: 100,

				// 动画状态
				isMoving: false,
				animationInterval: null,
			};
		},
		props: {
			endPosition: {
				type: Object, // 数字类型
				required: true, // 必填项
				default: null // 默认值
			},
		},
		mounted() {},
		methods: {
			// 从按钮位置开始动画
			startFromButton(e) {
				console.log(e);
				const touch = e.touches[0] || e.changedTouches[0];
				if (this.endPosition) {
					this.endX = this.endPosition.endX
					this.endY = this.endPosition.endY-40
				}
				console.log('touch::',touch)
				if (touch) {
					this.coords = {
						// 相对于视口的坐标
						clientX: touch.clientX,
						clientY: touch.clientY,
						// 相对于页面的坐标（包含滚动距离）
						pageX: touch.pageX,
						pageY: touch.pageY,
						// 相对于屏幕的坐标
						screenX: touch.screenX,
						screenY: touch.screenY
					};

					console.log(`按钮点击坐标:`, this.coords);
				}

				// 停止当前动画
				if (this.isMoving) {
					clearInterval(this.animationInterval);
				}


				this.ballX = this.coords.clientX;
				this.ballY = this.coords.clientY;

				console.log('ballX:', this.ballX, 'ballY:', this.ballY)

				// 开始动画
				this.startAnimation();
			},

			// 动画实现
			startAnimation() {
				this.isMoving = true;
				let step = 0;
				const totalSteps = 60;

				const startX = this.ballX;
				const startY = this.ballY;
				const xStep = (this.endX - startX) / totalSteps;
				const yStep = (this.endY - startY) / totalSteps;

				this.animationInterval = setInterval(() => {
					step++;
					const progress = step / totalSteps;

					// 抛物线运动
					this.ballX = startX + xStep * step;
					const arcHeight = Math.sin(progress * Math.PI) * 100; // 抛物线高度
					this.ballY = startY + yStep * step - arcHeight;

					if (step >= totalSteps) {
						this.ballX = this.endX;
						this.ballY = this.endY;
						clearInterval(this.animationInterval);
						this.isMoving = false;
					}
				}, 9);
			}
		},
		beforeUnmount() {
			if (this.animationInterval) {
				clearInterval(this.animationInterval);
			}
		}
	}
</script>

<style scoped>
	.container {
		/* padding: 10px;
		background-color: #f9f9f9;
		min-height: 100vh; */
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
	}
	/* 小球样式 */
	.ball {
		position: absolute;
		width: 20px;
		height: 20px;
		background-color: #ff0000;
		border-radius: 50%;
		z-index: 99999;
		transform: translate(-50%, -50%);
	}

</style>